<template>
  <div class="box">
    <div>
      <page-tab-list
        ref="pageTabList"
        url="/WhAccidentInitialReport/GetPageData"
        :params="params"
        placeholder="请输入事故名称,事故编号搜索"
        @initActive="_initActive"
        @initList="_initList"
      >
        <div v-if="this.active === 0">
          <van-cell
            class="card"
            v-for="(item, index) in list"
            :key="index"
          >
            <div>
              <div @click="detail(item)">
                <van-row
                  gutter="15"
                  style="word-break:break-all"
                >
                  <van-col>
                    <b style="font-size: 13px">{{ item.AccidentName }}</b>
                  </van-col>
                </van-row>
                <van-row gutter="15">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_type.png"
                    />事故编号：{{ item.AccidentNumber }}
                  </van-col>
                </van-row>
                <!-- <van-row gutter="20">
                                <van-col style="word-break:break-all" >
                                    <img class="icon" src="@/assets/Images/AppIcon/icon_list_type.png" />事故名称:{{ item.AccidentName }}
                                </van-col>
                            </van-row> -->

                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_date.png"
                    />事故发生日期：{{ item.AccidentDate | formatDateTime }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_type.png"
                    />事故分类：{{ item.AttidentClassification }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_type.png"
                    />事故等级：{{ item.AttidentgRading }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_type.png"
                    />潜在风险：{{ item.PotentialRisk }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_user.png"
                    />创建人：{{ item.CreateChnName }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_date.png"
                    />创建日期：{{ item.CreateDate | formatDateTime }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_type.png"
                    />区域部门：{{ item.AccidentDepartmentName }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_type.png"
                    />状态：{{ GetStatus(item.Status) }}
                  </van-col>
                </van-row>

                <van-divider />
              </div>
              <div class="op_btn">
                <div
                  class="btn_item"
                  v-if="item.Status ==10"
                  @click="userChooseDialog(item)"
                >
                  <img
                    src="@/assets/Images/AppIcon/icon_list_user.png"
                    alt=""
                  />
                  <div class="mr-10">指派调查组长</div>
                </div>
              </div>
            </div>
          </van-cell>
        </div>
        <div v-if="this.active === 1">
          <van-cell
            class="card"
            v-for="(item, index) in list"
            :key="index"
          >
            <div>
              <div @click="detail(item)">
                <b style="font-size: 13px">{{ item.AccidentName }}</b>
                <van-row gutter="15">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_type.png"
                    />事故编号：{{ item.AccidentNumber }}
                  </van-col>
                </van-row>
                <!-- <van-row gutter="20">
                                <van-col style="word-break:break-all" >
                                    <img class="icon" src="@/assets/Images/AppIcon/icon_list_type.png" />事故名称:{{ item.AccidentName }}
                                </van-col>
                            </van-row> -->

                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_date.png"
                    />事故发生日期：{{ item.AccidentDate | formatDateTime }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_type.png"
                    />事故分类：{{ item.AttidentClassification }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_type.png"
                    />事故等级：{{ item.AttidentgRading }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_type.png"
                    />潜在风险：{{ item.PotentialRisk }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_user.png"
                    />调查组长：{{ item.UserChnName1 }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_date.png"
                    />创建日期：{{ item.CreateDate | formatDateTime }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_type.png"
                    />区域部门：{{ item.AccidentDepartmentName }}
                  </van-col>
                </van-row>
                <van-row gutter="20">
                  <van-col>
                    <img
                      class="icon"
                      src="@/assets/Images/AppIcon/icon_list_type.png"
                    />状态：{{ GetStatus(item.Status) }}
                  </van-col>
                </van-row>

                <van-divider />
              </div>
              <!-- <div class="op_btn">
                                <div class="btn_item" v-if="item.Status ==10" @click="userChooseDialog(item)">
                                    <img src="@/assets/Images/AppIcon/icon_list_user.png" alt="" />
                                    <div class="mr-10">重新指派调查组长</div>
                                </div>
                            </div> -->
            </div>
          </van-cell>
        </div>
      </page-tab-list>
      <!-- <dialog-page-list title="选择指派组长" confirmButton="确认" :show.sync="userChooseDialogShow1" :url="this.$constUrl.CHOOSE_USER" :isMulti="'f'" :params="userParams" @callback="userChooseCallback1" @initList="_initListUser">
                <van-cell v-for="(item, index) in listUser" :key="index">
                    <div class="risk_item_radio">
                        <div class="mb-5">
                            <div class="mb-10">{{ item.ChnName }}</div>
                            <div>
                                {{ item.OrgFullName
              }}<span v-if="item.OrgFullName && item.PostName"></span>{{ item.PostName }}
                            </div>
                        </div>
                        <van-checkbox :name="item.UserName"></van-checkbox>
                    </div>
                </van-cell>
            </dialog-page-list> -->
      <user-choose-dialog
        title="选择调查组长"
        :show.sync="userChooseDialogShow1"
        :IsAccounted="true"
        :isMulti="'f'"
        @callback="userChooseCallback1"
      >
      </user-choose-dialog>
    </div>
  </div>
</template>
<script>
import DialogPageList from "@/components/DialogPageList.vue";
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
import { WhAccidentInitialReportSendSave } from "@/api/WhAccidentInitialReportSend";
import investigateList from "@/views/wh/AccidentInvestigate/List.vue";
import PageTabList from "@/components/PageTabList/PageTabList.vue";
export default {
  components: {
    investigateList,
    UserChooseDialog,
    PageTabList,
    DialogPageList,
  },
  data() {
    return {
      value: "",
      list: [],
      list2: [],
      list3: [],
      myList2: [],
      filter: {
        page: 0,
        dataType: "List",
        menuNo: "0202",
      },
      filter2: {
        page: 0,
        dataType: "ToBeAssigned",
      },
      filter3: {
        page: 0,
        dataType: "Assigned",
      },
      myLoading: false,
      myLoading2: false,
      myLoading3: false,
      myFinished: false,
      myFinished2: false,
      myFinished3: false,
      isEdit: false,
      AccidentNumber: "",
      userChooseDialogShow1: false,
      tabName: "tab1",
      active: 0,
      params: [
        {
          title: "待指派",
          dataType: "ToBeAssigned",
        },
        {
          title: "已指派",
          dataType: "Assigned",
        },
      ],
      userParams: [
        {
          Name: "ChnName",
          dataType: "List",
          accounted: true,
          userKind: 0,
        },
      ],
      listUser: [],
    };
  },
  created() {},
  methods: {
    _initActive(active) {
      this.active = active;
    },
    _initList(list) {
      this.list = list;
    },
    userChooseDialog(item) {
      this.userChooseDialogShow1 = true;
      this.AccidentNumber = item.AccidentNumber;
    },
    userChooseCallback1(data) {
      if (data.length == 0) {
        this.$toast("您还未选择指派组长");
        return false;
      }
      this.loading = true;
      var form1 = {};
      var UserNames = [];
      var list2 = [];
      data.map((item) => {
        UserNames.push(item.code);
      });
      this.list.map((item) => {
        if (item.AccidentNumber != this.AccidentNumber) {
          list2.push(item);
        }
      });
      form1.UserNames = UserNames;
      form1.IsAssist = false;
      form1.AccidentNumber = this.AccidentNumber;
      this.AccidentNumber = "";
      WhAccidentInitialReportSendSave(form1)
        .then((res) => {
          this.loading = false;
          this.userChooseDialogShow1 = false;
          this.$toast.success("指派成功！");
          setTimeout(() => {
            this._initList(list2);
          }, 300);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    _initListUser(list) {
      this.listUser = list;
    },
    GetStatus(val) {
      if (val == 0) {
        return "未提交";
      } else if (val == 5) {
        return "审批中";
      } else {
        return "已审批";
      }
    },
    myOnLoad() {
      this.myLoading = true;
      this.myLoading2 = true;
      this.myLoading3 = true;
      this.filter.page;
      list(this.filter).then((res) => {
        this.myLoading = false;
        this.filter.page = res.data.PageIndex;
        this.myList = this.myList.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.myFinished = true;
        }
      });
      list2(this.filter2).then((res) => {
        this.myLoading2 = false;
        this.filter.page = res.data.PageIndex;
        this.myList = this.myList.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.myFinished2 = true;
        }
      });
      list3(this.filter3).then((res) => {
        this.myLoading3 = false;
        this.filter.page = res.data.PageIndex;
        this.myList = this.myList.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.myFinished3 = true;
        }
      });
    },
    onLoad() {
      this.loading = true;
      ++this.filter.page;
    },
    tabChange(val) {
      this.tabName = val;
    },
    detail(item) {
      this.$router.push({
        path: "/AccidentInitReport/View",
        query: { id: item.ID },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.phone {
  position: relative;
  .code {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 12px;
  }
}
.register-info {
  background-color: #e8f1f8;
  padding-bottom: 20px;
}
.img-box {
  height: 50px;
  width: 50px;
  padding: 10px;
  position: absolute;
  left: 50%;
  top: 60px;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
}
.popup-title {
  line-height: 35px;
  padding: 10px;
  font-size: 15px;
  padding-left: 20px;
}

.op_btn {
  display: flex;
  justify-content: flex-end;
  .btn_item {
    display: flex;
    align-items: center;
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
}
</style>